<template>
  <span
    class="v-model-tree-node-label"
    :class="{
      '_is-new': showNew && (nodeData.isNew || nodeData.isUpdated),
      _selected: selected,
      _disabled: disabled
    }"
  >
    <span
      v-if="attr?.numberInfo?.number"
      style="margin-right: 4px"
      :style="{ color: selected ? '' : 'rgba(0, 0, 0, .5)' }"
    >
      {{ attr.numberInfo.number }}
    </span>

    <component
      :is="nodeLabelManager.getComp(nodeData)"
      :nodeData="processedNodeData || nodeData"
      :selected="selected"
      :disabled="disabled"
      :encrypted="encrypted"
      :showQualifiedName="showQualifiedName"
      :locale="locale"
    ></component>

    <span
      v-if="usageProject"
      style="color: #979797; margin-left: 3px"
      :class="{ _disabled: disabled }"
    >
      <Tooltip
        placement="bottom"
        inlineBlock
        :content="usageProject.usageProjectShowPath"
      >
        {{ usageProject.usageProjectName }}
      </Tooltip>
    </span>
    <span class="v-node-label-lock-name">{{ lockName }}</span>
  </span>
</template>
<script lang="ts" setup>
import { MetaclassType } from "@/constants/MetaclassType";
import { NodeData } from "@/modules/model/project/IGraphNode";
import { nodeLabelManager, Tooltip } from "@/mdesign-lib/mdesign-graph.umd.js";
import { locale } from "@/util/locale";
import { ref, computed, watchEffect } from "vue";

interface Props {
  nodeData: NodeData;
  selected: boolean;
  disabled?: boolean;
  showNew?: boolean;
  encrypted?: boolean;
  showQualifiedName?: boolean; // 是否来自属性列表
  lockName?: string;
}

const props = withDefaults(defineProps<Props>(), {
  showNew: true,
  showQualifiedName: false
});
const usageProject = computed(() => {
  if (props.nodeData.metaclass && [MetaclassType.Package, MetaclassType.Profile].includes(props.nodeData.metaclass)) {
    const usageInfo = app.activeProject?.ui.usagePackageMap.get(props.nodeData.id);
    if (usageInfo) {
      return {
        usageProjectName: "[" + usageInfo.usageProjectName + (usageInfo.usageProjectPath.endsWith("md3t") ? ".md3t" : ".md3") + "]",
        usageProjectShowPath: usageInfo.usageProjectShowPath
      };
    }
  }
  return undefined;
});

const attr = computed(() => {
  return props.nodeData.showAttribute;
});

// 新增响应式加工后的节点数据
const processedNodeData = ref<NodeData>();
// 使用 watchEffect 处理异步操作
watchEffect(async () => {
  try {
    // console.log(props.nodeData)
    if (props.nodeData.metaclass === "Slot") {
      // const typePropertyRow = await modelService.getModelPropertiesByKeys(props.nodeData.projectId, props.nodeData?.showAttribute?.extraAttribute?.slotPropertyId, ['84160402030680000', '84160402178569472', '84160412752942080']);
      // console.log('Slot：', typePropertyRow)
      // let split_string = props.nodeData?.showAttribute?.extraAttribute?.slotLabel || '';
      // const split_fields:string[] = split_string?.split('=');
      // console.log(split_fields)
      // const result_number = formatScientificNumber(split_fields[1], {
      //   'scientificNotation': typePropertyRow[0]['value'],
      //   'precisionLimit': typePropertyRow[1]['value'],
      //   'precision': typePropertyRow[2]['value']
      // });
      // console.log('过滤后的数据：',result_number)
      // props.nodeData?.showAttribute?.extraAttribute?.slotLabel = `${split_fields[0]}=${result_number}`
    }

    // 合并数据（根据实际业务需求调整）
    processedNodeData.value = props.nodeData;
  } catch (e) {
    console.error("Node data processing failed:", e);
    processedNodeData.value = props.nodeData; // 降级处理
  }
});
</script>
<style lang="scss">
@import "@/assets/css/theme.scss";
.v-model-tree-node-label {
  color: #202020;
  padding: 0 2px;
  position: relative;

  ._name-label {
    color: #202020;
  }

  ._type-label {
    color: #202020;
  }

  ._default-value-label {
    color: #a52a2a;
  }

  &._is-new {
    ._name-label {
      // color: #0586FD;
      color: var(--md-primary-color);
    }

    ._pre-label {
      // color: #0586FD !important;
      color: var(--md-primary-color);
    }
  }

  &._disabled {
    ._name-label {
      color: #979797;
    }

    ._type-label {
      color: #979797;
    }

    ._default-value-label {
      color: #979797;
    }
    .v-node-label-lock-name {
      color: #979797;
    }
  }

  &._selected {
    background-color: $theme-color;

    color: #fff;

    ._name-label {
      color: #fff;
    }

    ._type-label {
      color: #fff;
    }

    ._default-value-label {
      color: #fff;
    }

    ._pre-label {
      color: #fff !important;
    }
    .v-node-label-lock-name {
      color: #fff;
    }
  }
  .v-node-label-lock-name {
    margin-left: 5px;
  }
}
</style>
